<template>
  <div class="path-bar">
    <div
      class="cicle-icon"
      :style="{ backgroundColor: props.color }"
      @click="showPop"
    >
      +
    </div>
    <span class="path-bar-txt" :style="{ color: props.color }">{{
      pathStr
    }}</span>
    <el-dialog
      v-model="popShow"
      title="配置关联路段"
      width="800"
      :destroy-on-close="true"
    >
      <el-transfer
        v-model="selectValue"
        filterable
        :filter-method="filterMethod"
        filter-placeholder="输入筛选路段"
        :data="pathData"
        :props="{ key: 'id', label: 'name' }"
        :titles="['可选路段', '已选路段']"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="popShow = false">取消</el-button>
          <el-button type="primary" @click="confirmHandle">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { computed, ref, watch } from "vue";
import { sectionList } from "./request.js"
// 这里的value应该是id的数组
const model = defineModel();
const selectValue = ref([]);

selectValue.value = Array.isArray(model.value)
  ? model.value.map((v) => v.id)
  : [];

const props = defineProps({
  color: {
    required: true,
    type: String,
  },
  data: {
    required: true,
    type: Object,
  },
  dateTime: {
    required: true,
    type: String,
  },
  teamId: {
    required: true,
    type: String,
  },
});

const findStr = (id) => {
  return pathData.value.find((v) => v.id == id)?.name;
};
const pathStr = computed(() => {
  const val = selectValue.value;
  if (Array.isArray(val)) {
    const len = val.length;
    if (len == 0) return "暂无路段";
    let str = findStr(val[0]);
    for (let i = 1; i < Math.min(3, len); i++) {
      str += "、" + findStr(val[i]);
    }
    if (len > 3) str = str + " +" + String(len - 3);
    return str;
  } else {
    return "暂无路段";
  }
});
const popShow = ref(false);

const confirmHandle = () => {
  popShow.value = false;
  model.value = selectValue.value.map((v) => {
    return {
      id: v,
      name: findStr(v),
    };
  });
};
const pathData = ref(model.value);
const showPop = () => {
  sectionList({
    teamId: props.teamId,
    dutyDate: props.dateTime,
    cashier: props.data.cashierId,
  }).then((res) => {
    pathData.value = res.data.result;
  });
  popShow.value = true;
};
const filterMethod = (query, item) => {
  return item.name.toLowerCase().includes(query.toLowerCase());
};
</script>
<style lang='less' scoped>
.path-bar {
  text-align: center;
  flex: 1;
  line-height: 46px;
  height: 46px;

  .cicle-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
  }

  .path-bar-txt {
    flex: 1;
  }
}
</style>